<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>
        <ion-title>
            <h1>
                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="lesson?.coursemodule" [courseId]="courseId" />
            </h1>
        </ion-title>
        <ion-buttons slot="end">
            <ion-button fill="clear" *ngIf="displayMenu || mediaFile" [ariaLabel]="'addon.mod_lesson.lessonmenu' | translate"
                (click)="showMenu()">
                <ion-icon name="fas-list-ul" slot="icon-only" aria-hidden="true" />
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content class="limited-width">
    <core-loading [hideUntil]="loaded">
        <!-- Info messages. Only show the first one. -->
        <ion-card class="core-info-card" *ngIf="lesson && messages?.length">
            <ion-item class="ion-text-wrap">
                <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
                <ion-label>{{ messages[0].message }}</ion-label>
            </ion-item>
        </ion-card>

        <div *ngIf="lesson" [ngClass]='{"addon-mod_lesson-slideshow": lesson.slideshow}'
            [ngStyle]="{'width': lessonWidth, 'height': lessonHeight}">

            <core-timer *ngIf="endTime" [endTime]="endTime" (finished)="timeUp()" [timeLeftClassThreshold]="-1"
                [timerText]="'addon.mod_lesson.timeremaining' | translate" />

            <!-- Retake and ongoing score. -->
            <ion-item class="ion-text-wrap" *ngIf="showRetake && !eolData && !processData">
                <ion-label>
                    <p>{{ 'addon.mod_lesson.attempt' | translate:{$a: retake} }}</p>
                </ion-label>
            </ion-item>
            <ion-item *ngIf="pageData && pageData.ongoingscore && !eolData && !processData"
                class="addon-mod_lesson-ongoingscore ion-text-wrap">
                <ion-label>{{ pageData.ongoingscore }}</ion-label>
            </ion-item>

            <!-- Page content. -->
            <ion-card *ngIf="!eolData && !processData">
                <!-- Content page. -->
                <ion-item class="ion-text-wrap" *ngIf="!question && pageContent">
                    <ion-label>
                        <core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="pageContent"
                            contextLevel="module" [contextInstanceId]="lesson.coursemodule" [courseId]="courseId" />
                    </ion-label>
                </ion-item>

                <!-- Question page. -->
                <!-- We need to set ngIf loaded to make formGroup directive restart every time a page changes, see MOBILE-2540. -->
                <form *ngIf="question && loaded" [formGroup]="questionForm" #questionFormEl (ngSubmit)="submitQuestion($event)">

                    <ion-item-divider class="ion-text-wrap" *ngIf="pageContent">
                        <ion-label>
                            <h2>
                                <core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="pageContent"
                                    contextLevel="module" [contextInstanceId]="lesson.coursemodule" [courseId]="courseId" />
                            </h2>
                        </ion-label>
                    </ion-item-divider>

                    <!-- Render a different input depending on the type of the question. -->
                    <ng-container [ngSwitch]="question.template">

                        <!-- Short answer. -->
                        <ion-item class="ion-text-wrap" *ngSwitchCase="'shortanswer'">
                            <ion-input [type]="question.input!.type" placeholder="{{ 'addon.mod_lesson.youranswer' | translate }}"
                                [ariaLabel]="'addon.mod_lesson.youranswer' | translate" [id]="question.input!.id"
                                [formControlName]="question.input!.name" autocorrect="off" [maxlength]="question.input!.maxlength" />
                        </ion-item>

                        <!-- Essay. -->
                        <ng-container *ngSwitchCase="'essay'">
                            <ion-item *ngIf="question.textarea">
                                <ion-label class="sr-only">{{ 'core.content' | translate }}</ion-label>
                                <core-rich-text-editor placeholder="{{ 'addon.mod_lesson.youranswer' | translate }}"
                                    [control]="question.control" [component]="component" [componentId]="lesson.coursemodule"
                                    [autoSave]="true" contextLevel="module" [contextInstanceId]="lesson.coursemodule"
                                    elementId="answer_editor" />
                            </ion-item>
                            <ion-item class="ion-text-wrap" *ngIf="!question.textarea && question.useranswer">
                                <ion-label>
                                    <p class="item-heading">{{ 'addon.mod_lesson.youranswer' | translate }}</p>
                                    <p>
                                        <core-format-text [component]="component" [componentId]="lesson.coursemodule"
                                            [text]="question.useranswer" contextLevel="module" [contextInstanceId]="lesson.coursemodule"
                                            [courseId]="courseId" />
                                    </p>
                                </ion-label>
                            </ion-item>
                        </ng-container>

                        <!-- Multichoice. -->
                        <ng-container *ngSwitchCase="'multichoice'">
                            <!-- Single choice. -->
                            <ion-radio-group *ngIf="!question.multi" [formControlName]="question.controlName">
                                <ion-item class="ion-text-wrap" *ngFor="let option of question.options">
                                    <ion-radio [id]="option.id" [value]="option.value" [disabled]="option.disabled">
                                        <core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="option.text"
                                            contextLevel="module" [contextInstanceId]="lesson.coursemodule" [courseId]="courseId" />
                                    </ion-radio>
                                </ion-item>
                            </ion-radio-group>

                            <!-- Multiple choice. -->
                            <ng-container *ngIf="question.multi">
                                <ion-item class="ion-text-wrap" *ngFor="let option of question.options">
                                    <ion-checkbox [id]="option.id" [formControlName]="option.name">
                                        <core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="option.text"
                                            contextLevel="module" [contextInstanceId]="lesson.coursemodule" [courseId]="courseId" />
                                    </ion-checkbox>
                                </ion-item>
                            </ng-container>
                        </ng-container>

                        <!-- Matching. -->
                        <ng-container *ngSwitchCase="'matching'">
                            <ion-item class="ion-text-wrap" *ngFor="let row of question.rows">
                                <ion-select [id]="row.id" [formControlName]="row.name" [cancelText]="'core.cancel' | translate"
                                    interface="action-sheet">
                                    <core-format-text slot="label" [component]="component" [componentId]="lesson.coursemodule"
                                        [text]="row.text" contextLevel="module" [contextInstanceId]="lesson.coursemodule"
                                        [courseId]="courseId" />
                                    <ion-select-option *ngFor="let option of row.options" [value]="option.value">
                                        {{option.label}}
                                    </ion-select-option>
                                </ion-select>
                            </ion-item>
                        </ng-container>
                    </ng-container>

                    <ion-button expand="block" type="submit" class="ion-text-wrap ion-margin">
                        {{ question.submitLabel }}
                    </ion-button>
                    <!-- Remove this once Ionic fixes this bug: https://github.com/ionic-team/ionic-framework/issues/19368 -->
                    <input type="submit" class="core-submit-hidden-enter" />
                </form>
            </ion-card>

            <!-- Page buttons and progress. -->
            <ion-list *ngIf="!eolData && !processData">
                <ion-grid *ngIf="pageButtons?.length" class="ion-text-wrap addon-mod_lesson-pagebuttons">
                    <ion-row class="ion-align-items-center">
                        <ion-col *ngFor="let button of pageButtons" size="12" size-md="6" size-lg="3" col-xl>
                            <ion-button expand="block" fill="outline" [id]="button.id" (click)="buttonClicked(button.data)"
                                class="ion-text-wrap">
                                {{ button.content }}
                            </ion-button>
                        </ion-col>
                    </ion-row>
                </ion-grid>
                <ion-item class="ion-text-wrap" *ngIf="lesson.progressbar && !canManage && pageData">
                    <ion-label>
                        <span id="addon-mod_lesson-{{cmId}}-progress">
                            {{ 'addon.mod_lesson.progresscompleted' | translate:{$a: pageData.progress} }}
                        </span>
                        <core-progress-bar [progress]="pageData.progress" ariaDescribedBy="addon-mod_lesson-{{cmId}}-progress" />
                    </ion-label>
                </ion-item>
                <ion-card class="core-info-card" *ngIf="lesson.progressbar && canManage">
                    <ion-item class="ion-text-wrap">
                        <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
                        <ion-label>{{ 'addon.mod_lesson.progressbarteacherwarning2' | translate }}</ion-label>
                    </ion-item>
                </ion-card>
            </ion-list>

            <!-- End of lesson reached. -->
            <ion-card class="core-warning-card" *ngIf="eolData && !processData && eolData.offline?.value">
                <ion-item>
                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                    <ion-label>{{ 'addon.mod_lesson.finishretakeoffline' | translate }}</ion-label>
                </ion-item>
            </ion-card>

            <ion-card *ngIf="eolData && !processData">

                <ion-card-header class="ion-text-wrap" *ngIf="eolData.gradelesson">
                    <ion-card-title>{{ 'addon.mod_lesson.congratulations' | translate }}</ion-card-title>
                </ion-card-header>
                <ion-item class="ion-text-wrap" *ngIf="eolData.notenoughtimespent">
                    <ion-label>{{ eolData.notenoughtimespent.message }}</ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="eolData.numberofpagesviewed">
                    <ion-label>{{ eolData.numberofpagesviewed.message }}</ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="eolData.youshouldview">
                    <ion-label>{{ eolData.youshouldview.message }}</ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="eolData.numberofcorrectanswers">
                    <ion-label>{{ eolData.numberofcorrectanswers.message }}</ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="eolData.displayscorewithessays">
                    <ion-label [innerHTML]="eolData.displayscorewithessays.message" />
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="!eolData.displayscorewithessays && eolData.displayscorewithoutessays">
                    <ion-label>{{ eolData.displayscorewithoutessays.message }}</ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="eolData.yourcurrentgradeisoutof">
                    <ion-label>{{ eolData.yourcurrentgradeisoutof.message }}</ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="eolData.eolstudentoutoftimenoanswers">
                    <ion-label>{{ eolData.eolstudentoutoftimenoanswers.message }}</ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="eolData.welldone">
                    <ion-label>{{ eolData.welldone.message }}</ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="lesson.progressbar && eolData.progresscompleted">
                    <ion-label>
                        <span id="addon-mod_lesson-{{cmId}}-progress-end">
                            {{ 'addon.mod_lesson.progresscompleted' | translate:{$a: eolData.progresscompleted.value} }}
                        </span>
                        <core-progress-bar [progress]="eolData.progresscompleted.value"
                            ariaDescribedBy="addon-mod_lesson-{{cmId}}-progress-end" />
                    </ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="eolData.displayofgrade">
                    <ion-label>{{ eolData.displayofgrade.message }}</ion-label>
                </ion-item>
                <ion-button *ngIf="eolData.reviewlesson" expand="block" class="ion-text-wrap ion-margin"
                    (click)="reviewLesson(reviewPageId!)">
                    {{ 'addon.mod_lesson.reviewlesson' | translate }}
                </ion-button>
                <ion-item class="ion-text-wrap" *ngIf="eolData.modattemptsnoteacher">
                    <ion-label>{{ eolData.modattemptsnoteacher.message }}</ion-label>
                </ion-item>
                <!-- If activity link was successfully formatted, render the button. -->
                <ion-button *ngIf="activityLink && activityLink.formatted" expand="block" fill="outline" [href]="activityLink.href"
                    core-link [capture]="true" class="ion-text-wrap ion-margin">
                    <core-format-text [text]="activityLink.label" contextLevel="module" [contextInstanceId]="lesson.coursemodule"
                        [courseId]="courseId" />
                </ion-button>
                <ion-item class="ion-text-wrap" *ngIf="activityLink && !activityLink.formatted">
                    <!-- Activity link wasn't formatted, render the original link. -->
                    <ion-label>
                        <core-format-text [text]="activityLink.label" contextLevel="module" [contextInstanceId]="lesson.coursemodule"
                            [courseId]="courseId" />
                    </ion-label>
                </ion-item>
            </ion-card>

            <!-- Feedback returned when processing an action. -->
            <ion-list *ngIf="processData">
                <ion-item class="ion-text-wrap" *ngIf="processData.ongoingscore && !processData.reviewmode">
                    <ion-label>{{ processData.ongoingscore }}</ion-label>
                </ion-item>
                <ion-item class="ion-text-wrap" *ngIf="!processData.reviewmode || review">
                    <ion-label>
                        <div *ngIf="!processData.reviewmode">
                            <core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="processData.feedback"
                                contextLevel="module" [contextInstanceId]="lesson.coursemodule" [courseId]="courseId" />
                        </div>
                        <div *ngIf="review">
                            <p>{{ 'addon.mod_lesson.gotoendoflesson' | translate }}</p>
                            <p>{{ 'addon.mod_lesson.or' | translate }}</p>
                            <p>{{ 'addon.mod_lesson.continuetonextpage' | translate }}</p>
                        </div>
                    </ion-label>
                </ion-item>

                <ion-button expand="block" class="ion-text-wrap ion-margin" *ngIf="review" (click)="changePage(LESSON_EOL)">
                    {{ 'addon.mod_lesson.finish' | translate }}
                </ion-button>
                <ion-button expand="block" class="ion-text-wrap ion-margin" fill="outline" *ngFor="let button of processDataButtons"
                    (click)="changePage(button.pageId, true)">
                    {{ button.label | translate }}
                </ion-button>
            </ion-list>
        </div>
    </core-loading>
</ion-content>
